<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 设置视口，确保在移动设备上正确显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲜时蔬 - 用户登录</title>
    <!-- 核心依赖 -->
    <!-- 引入Vue.js框架，用于构建用户界面 -->
    <script src="../../js/vue.js"></script>
    <!-- 引入Element UI样式文件，提供组件样式 -->
    <link rel="stylesheet" href="../../css/index.css">
    <!-- 引入Element UI组件库，提供UI组件 -->
    <script src="../../js/index.js"></script>
    <!-- 引入axios库，用于发送HTTP请求 -->
    <script src="../../js/axios.min.js"></script>

    <!-- 基础样式 -->
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box; /* 盒模型设置为border-box，确保padding不影响元素总宽度 */
        }

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            background-color: #f5f5f5; /* 浅灰色背景 */
            color: #333; /* 深灰色文字 */
            min-height: 100vh; /* 最小高度为视口高度，确保内容占满屏幕 */
            padding-top: 80px; /* 为顶部导航栏留出空间 */
            padding-bottom: 50px;
        }

        /* 导航栏样式 */
        .header {
            background: #fff; /* 白色背景 */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 底部阴影效果 */
            position: fixed; /* 固定在顶部 */
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000; /* 层级设置，确保在其他元素上方 */
        }

        .container {
            width: 1140px;
            margin: 0 auto; /* 居中显示 */
            padding: 0 15px;
        }

        /* 响应式布局 - 根据屏幕宽度调整容器宽度 */
        @media (max-width: 1199px) {
            .container {
                width: 960px;
            }
        }

        @media (max-width: 991px) {
            .container {
                width: 720px;
            }
        }

        @media (max-width: 767px) {
            .container {
                width: 100%;
            }
        }

        .header-content {
            display: flex; /* 使用flex布局 */
            justify-content: space-between; /* 元素之间均匀分布 */
            align-items: center; /* 垂直居中对齐 */
            padding: 15px 0;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: #27ae60; /* 品牌绿色 */
            text-decoration: none; /* 去除下划线 */
        }

        .logo i {
            margin-right: 8px;
        }

        /* 图标与文字间距 */
        .nav {
            display: flex;
        }

        /* 导航链接横向排列 */
        .nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #666; /* 灰色文字 */
            font-size: 14px;
            padding: 5px 0;
        }

        .nav a.active {
            color: #27ae60; /* 激活状态为品牌绿色 */
            border-bottom: 2px solid #27ae60; /* 底部绿色边框 */
        }

        .user-actions {
            display: flex;
            align-items: center;
        }

        /* 用户操作按钮横向排列 */
        .user-actions button {
            margin-left: 15px;
            background: none; /* 透明背景 */
            border: none; /* 无边框 */
            color: #666;
            cursor: pointer; /* 鼠标悬停显示手型 */
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .user-actions button i {
            margin-right: 5px;
        }

        /* 图标与文字间距 */

        /* 主内容区 */
        .main {
            display: flex;
            justify-content: center; /* 内容居中 */
            padding: 40px 20px;
        }

        /* 登录容器样式 */
        .login-container {
            width: 100%;
            max-width: 400px; /* 最大宽度限制 */
            background: #fff;
            border-radius: 4px; /* 圆角边框 */
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 阴影效果 */
            overflow: hidden;
            transition: all 0.3s ease; /* 过渡动画效果 */
        }

        .login-container:hover {
            box-shadow: 0 12px 40px rgba(31, 38, 135, 0.3); /* 悬停时增强阴影 */
            transform: translateY(-2px); /* 悬停时轻微上移 */
        }

        /* 登录头部样式 */
        .login-header {
            background: #fff;
            padding: 30px 20px;
            text-align: center; /* 文字居中 */
        }

        .login-header h2 {
            color: #333;
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 1px; /* 字母间距 */
            margin: 0;
        }

        /* 登录表单样式 */
        .login-form {
            padding: 20px 30px 30px;
        }

        /* 表单项样式 */
        .el-form-item {
            margin-bottom: 20px; /* 表单项之间的间距 */
        }

        .el-input {
            height: 40px;
            border-radius: 4px !important;
            border: 1px solid #e5e7eb !important;
            transition: all 0.3s ease;
        }

        .el-input:hover {
            border-color: #27ae60 !important; /* 悬停时边框变为品牌绿色 */
            box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.1) !important;
        }

        .el-input:focus-within {
            border-color: #27ae60 !important; /* 聚焦时边框变为品牌绿色 */
            box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2) !important;
        }

        .el-input__inner {
            height: 40px !important;
            font-size: 14px;
            padding: 0 16px;
            border: none !important;
        }

        .el-icon-user,
        .el-icon-lock {
            color: #86909c;
            font-size: 16px;
        }

        /* 登录按钮样式 */
        .el-button--primary {
            width: 100%; /* 按钮占满父容器宽度 */
            height: 40px;
            border-radius: 4px;
            background-color: #27ae60; /* 品牌绿色背景 */
            border: none;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .el-button--primary:hover {
            background-color: #219d5d; /* 深一点的绿色 */
            transform: translateY(-2px); /* 上移效果 */
            box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
        }

        .el-button--primary:active {
            transform: translateY(0); /* 点击时恢复原位 */
            box-shadow: 0 2px 8px rgba(39, 174, 96, 0.2);
        }

        .el-button--loading .el-icon-loading {
            margin-right: 8px;
            font-size: 16px;
        }

        /* 底部链接样式 */
        .footer-links {
            display: flex;
            justify-content: space-between; /* 两端对齐 */
            padding: 0 30px 30px;
            font-size: 14px;
        }

        .footer-links a {
            color: #27ae60;
            text-decoration: none;
            transition: all 0.3s ease;
            padding: 4px 8px;
            border-radius: 4px;
        }

        .footer-links a:hover {
            color: #219d5d;
            background-color: rgba(39, 174, 96, 0.1); /* 浅色背景 */
            text-decoration: none;
        }

        /* 页脚 */
        .footer {
            background: #333; /* 深色背景 */
            color: #fff; /* 白色文字 */
            padding: 30px 0;
            margin-top: 50px;
        }

        .footer-content {
            text-align: center;
            font-size: 14px;
        }

        /* 消息提示框样式优化 */
        .el-message {
            min-width: 280px !important;
            border-radius: 4px !important;
            padding: 12px 16px !important;
        }

        .el-message__content {
            font-size: 14px !important;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 导航栏 -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <!-- 网站logo和名称 -->
                <a href="index.html" class="logo">
                    <i class="el-icon-shopping-bag"></i>
                    <span>鲜时蔬</span>
                </a>
                <!-- 导航链接 -->
                <!--<nav> 是 HTML5 中新增的语义化标签，专门用于定义页面中的导航链接区域-->
                <nav class="nav">
                    <a href="index.html">首页</a>
                    <a href="vegetables.html">蔬菜列表</a>
                    <a href="contact.html">联系我们</a>
                </nav>
                <!-- 用户操作按钮 -->
                <div class="user-actions">
                    <button class="active">
                        <!-- <i> 标签作为图标容器，借助 CSS 类名来展示各种图标，让界面更直观美观。-->
                        <i class="el-icon-user"></i> 登录
                    </button>
                    <button @click="goToCart">
                        <i class="el-icon-shopping-cart"></i> 购物车
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="main">
        <!-- 登录表单容器 -->
        <div class="login-container">
            <div class="login-header">
                <h2>用户登录</h2>
            </div>
            <!-- Element UI表单组件，:model绑定表单数据，:rules绑定验证规则 -->
            <el-form :model="loginForm" ref="form" class="login-form" :rules="loginRules">
                <!-- 用户名输入框 -->
                <el-form-item prop="userName">
                    <el-input
                            v-model="loginForm.userName"
                            placeholder="请输入用户名/手机号"
                            prefix-icon="el-icon-user"
                            @keyup.enter.native="handleLogin"><!-- 回车触发登录 -->
                    </el-input>
                </el-form-item>
                <!-- 密码输入框 -->
                <el-form-item prop="password">
                    <el-input
                            v-model="loginForm.password"
                            type="password"
                            placeholder="请输入密码"
                            prefix-icon="el-icon-lock"
                            @keyup.enter.native="handleLogin">  <!-- 回车触发登录 -->
                        <!--@keyup：是 Vue 的事件绑定语法，用于监听键盘按键抬起事件-->
                        <!--.enter：是按键修饰符，指定只监听回车键（Enter）的事件。-->
                        <!--.native：是 Vue 用于监听原生 DOM 事件的修饰符，
                        因为这里是在 Element UI 的 <el-input> 组件上监听事件，
                        需要用 .native 才能触发原生键盘事件-->
                        <!--handleLogin：是事件触发后要执行的方法名-->
                    </el-input>
                </el-form-item>
                <!-- 记住我复选框 -->
                <el-form-item prop="remember" style="margin-bottom: 10px;">
                    <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
                </el-form-item>
                <!-- 登录按钮 -->
                <el-button
                        type="primary"
                        @click="handleLogin"
                        :loading="loading">
                    登录
                </el-button>
            </el-form>

            <!-- 底部链接 -->
            <div class="footer-links">
                <a href="#" @click.prevent="handleRegister">还没有账号？去注册</a>
                <a href="#" @click.prevent="handleForgotPassword">忘记密码？</a>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p>© 2025 鲜时蔬 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>
</div>

<script>
    // 创建Vue实例
    new Vue({
        el: '#app',  // 挂载到id为app的元素
        data() {
            return {
                // 登录表单数据
                loginForm: {
                    userName: '',  // 用户名/手机号
                    password: '',  // 密码
                    remember: false,  // 是否记住用户名
                },
                loading: false,  // 登录按钮加载状态
                // 表单验证规则
                loginRules: {
                    userName: [
                        {required: true, message: '请输入用户名或手机号', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 20, message: '密码长度需在6-20个字符之间', trigger: 'blur'}
                    ],
                }
            }
        },
        mounted() {
            // 页面加载完成后执行
            // 从本地存储获取保存的用户名
            const savedUsername = localStorage.getItem('savedUsername');
            // 如果存在保存的用户名，则自动填充并勾选"记住我"
            if (savedUsername) {
                this.loginForm.userName = savedUsername;
                this.loginForm.remember = true;
            }
        },
        methods: {
            // 跳转到购物车页面
            goToCart() {
                window.location.href = 'cart.html';  // 页面跳转
            },
            // 处理登录逻辑
            handleLogin() {
                // 调用表单验证方法
                this.$refs.form.validate((isValid) => {
                    // 如果表单验证通过
                    if (isValid) {
                        this.loading = true;  // 显示加载状态
                        const _this = this;  // 保存this上下文引用

                        // 发送登录请求
                        axios.get('/vegetablemarketexpress/user/login?userName=' +
                            encodeURIComponent(this.loginForm.userName) +  // 编码用户名，防止特殊字符问题
                            "&password=" + encodeURIComponent(this.loginForm.password))  // 编码密码
                            .then(response => {
                                this.loading = false;  // 隐藏加载状态

                                // 如果登录成功（后端返回状态码200）
                                if (response.data.code == 200) {
                                    const userInfo = response.data.userInfo;  // 获取用户信息
                                    // 保存登录状态到本地存储
                                    localStorage.setItem('token', response.data.token);  // 保存令牌
                                    localStorage.setItem('userInfo', JSON.stringify(userInfo));  // 保存用户信息

                                    // 根据"记住我"选项决定是否保存用户名
                                    if (this.loginForm.remember) {
                                        localStorage.setItem('savedUsername', this.loginForm.userName);
                                    } else {
                                        localStorage.removeItem('savedUsername');  // 移除保存的用户名
                                    }

                                    // 显示登录成功消息
                                    _this.$message({
                                        message: '登录成功，即将跳转到首页',
                                        type: 'success',
                                        duration: 1500  // 消息显示1.5秒
                                    });

                                    // 延迟0.5秒后跳转到首页
                                    setTimeout(() => {
                                        window.location.href = '/vegetablemarketexpress/html/front/index.html';
                                    }, 500);
                                } else {
                                    // 登录失败，显示错误消息
                                    _this.$message.error(response.data.message || '用户名或者密码错误');
                                }
                            })
                            .catch(error => {
                                this.loading = false;  // 隐藏加载状态
                                console.error('请求错误:', error);  // 控制台打印错误信息
                                _this.$message.error('登录请求异常，请检查网络或联系管理员');
                            });
                    }
                });
            },

            // 处理忘记密码
            handleForgotPassword() {
                this.$message.info('即将跳转到忘记密码页面');
                 window.location.href = 'forget.html';
            },

            // 处理注册账号
            handleRegister() {
                this.$message.info('即将跳转到注册页面');
                window.location.href = '/vegetablemarketexpress/html/front/register.html';
            }
        }
    });
</script>
</body>
</html>